<template>
    <div class="count">
        <h2>当前求和为：{{countstore.sum}}</h2>
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {useConuntStore} from '@/store/count'

const countstore = useConuntStore();
//以下两种方式都可以拿到state中的数据。
console.log(countstore.sum);
console.log(countstore.$state.sum)
//数据
let n = ref(1);


function add(){
    countstore.inrment(n.value);
}

function minus(){
   // sum.value -=n.value;
}
</script>
<style scoped>
    .count{
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow:  0 0 10px;
    }
    select, button{
        margin: 0 5px;
        height: 25px;
    }
</style>